<template>
    <div>
        <h1>会员列表页</h1>

        <input type="button" value="新增" class="btn btn-primary" @click="add">
        <hr/>

        <div>
            会员编号：<input type="text" v-model="queryInfo.id" />
            会员名称：<input type="text" v-model="queryInfo.name" />
            会员等级：<select v-model="queryInfo.levelId">
                <option value="">请选择</option>
                <option :value="item.Id" v-for="item in queryLevel.LevelName" :key="item.Id">{{item.LevelName}}</option>
            </select>
            <input type="button" value="查询" class="btn btn-primary" @click="getmemberlist" />
        </div>


        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>Id</td>
                    <td>会员姓名</td>
                    <td>会员手机号</td>
                    <td>会员身份证号码</td>
                    <td>会员出生年月日</td>
                    <td>会员的余额</td>
                    <td>会员的积分</td>
                    <td>会员等级ID</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in list" :key="item.Id">
                    <td>{{item.Id}}</td>
                    <td>{{item.Name}}</td>
                    <td>{{item.Phone.substring(0,3) + '****' + item.Phone.substring(7)}}</td>
                    <td>{{item.Card}}</td>
                    <td>{{item.Birthday}}</td>
                    <td>￥{{item.Money.toFixed(2)}}</td>
                    <td>{{item.Points}}</td>
                    <td>
                        <span v-if="item.LevelId == 1">普通会员</span>
                        <span v-if="item.LevelId == 2">黄金会员</span>
                        <span v-if="item.LevelId == 3">钻石会员</span>
                        <span v-if="item.LevelId == 4">黑卡会员</span>
                        <span v-if="item.LevelId == 5">黄卡会员</span>
                    </td>
                    <td>
                        <input type="button" value="修改" class="btn btn-warning" @click="upd(item.Id)">
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,reactive, onMounted} from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const add = () => {
    router.push('/memberadd')
}



let queryLevel:any = reactive({
    LevelName:[],
})

//页面一打开就需要获取会员等级列表
onMounted(() => {
    getmemberlist();
    getLevelList();
})

//获取会员等级列表
const getLevelList = () => {
    axios({
        url:'/api/Member/GetMemberLevels',
        method:'get',
    })
    .then((res) => {
        console.log(res);
        //需要存储起来
        queryLevel.LevelName = res.data;
    })
    .catch((err) => {
        console.log(err);
    })
}


let list:any = ref('')


//后端需要的参数
let queryInfo = reactive({
    id:'',
    name:'',
    levelId:'',
})


//获取列表数据
const getmemberlist = () => {
    axios({
        url:'/api/Member/GetMembers',
        method:'get',
        params:queryInfo
    })
    .then(res => {
        console.log(res)
        list.value = res.data;
        console.log(list)
    })
    .catch(err => {
        console.log(err)
    })
}

//删除
const del = (id:any) => {
    //1.友好提示
    var f = confirm('确定要删除吗？') //返回值 true  false
    if(f==true){
        //2.发送网络请求做删除操作
        axios({
            url:'/api/Member/DelMemberItem',
            method:'delete',
            params:{
                id:id, 
            }
        })
        .then((res) => {
            console.log(res);
            if(res.data == 1)
            {
                alert('删除成功')
                getmemberlist()
            }
            else
            { 
                alert('删除失败')
                return;
            }
        })
        .catch((err) => {
            console.log(err);
        })
    }
}


//修改
const upd = (id:any) => {
    //跳转并且传递参数
    router.push({
        path:'/memberupdate',
        query:{
            //前面的id是自己写的变量名，引号后面的是：修改按钮上面传的id
            id:id
        }
    });
}

</script>

<style scoped>

</style>